<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="topBar">
			<view>
				<uni-nav-bar @clickLeft="back" height="50px" backgroundColor="#3284fc" left-icon="left" :border="false"
					leftText="返回" rightText="设置" title="订单详情" />
				<view class="top1">支付成功, 请您前往指定门店消费</view>

				<view class="address">
					<image class="img1" src="@/static/myf_img/商家@2x.png"></image>
					<view class="addressInfo">
						<view style="color: #fff; font-size: 32rpx; font-weight: 700;">伟业汽车美容店(人民路店)</view>
						<view style="color: #fff; font-size: 26rpx;">山阳区人民路99号</view>
					</view>
					<image class="img1" src="@/static/myf_img/plane@2x.png"></image>
				</view>
			</view>

			<!-- 订单详情 -->
			<view>
				<uni-card class="card1">
					<view style="font-size: 36rpx; font-weight: 700;">订单详情</view>
					<view class="content1">
						<view style="font-size: 32rpx;">车辆惊喜</view>
						<view>￥39.90</view>
					</view>
					<view class="content2">
						<view style="font-size: 32rpx;">车辆附加费用</view>
						<view>0</view>
					</view>
					<view class="content3">
						<view style="font-size: 32rpx;">原价</view>
						<view>￥59.90</view>
					</view>
					<view class="content4">
						<view style="font-size: 32rpx;">电价优惠</view>
						<view style="color: orange;">-￥20</view>
					</view>
					<view class="content5">
						<view style="font-size: 32rpx;">优惠卷</view>
						<view style="color: orange;">-￥10</view>
					</view>
					<view class="content6">
						<view style="font-size: 32rpx;">支付金额</view>
						<view style="color: green; font-size: 34rpx; font-weight: 700;">￥29.9</view>
					</view>
				</uni-card>
			</view>

			<!-- 订单信息 -->
			<view class="orderDet">
				<uni-card class="card2">
					<view style="font-size: 36rpx; font-weight: 700;">订单信息</view>
					<view class="content1">
						<view style="font-size: 32rpx;">订单号</view>
						<view>1212151215</view>
					</view>
					<view class="content2">
						<view style="font-size: 32rpx;">下单时间</view>
						<view>2020.01.08&nbsp;&nbsp;17:40</view>
					</view>
					<view class="content3">
						<view style="font-size: 32rpx;">车辆</view>
						<view>玛莎拉蒂WE9/豫W98MYF</view>
					</view>
				</uni-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				back() {
					uni.switchTab({
						url: "/pages/index/index"
					})
				},
			}
		},
		methods: {

		}
	}
</script>

<style>
	.card2 .content3 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 0;
	}

	.card2 .content2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 0;
	}

	.card2 .content1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 0;
	}

	.card2 {
		border-radius: 30rpx;
	}

	.card1 .content6 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 0;
		border-bottom: 2rpx solid #bfbfbf;
	}

	.card1 .content5 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.card1 .content4 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 0;
		border-bottom: 2rpx solid #bfbfbf;
	}

	.card1 .content3 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.card1 .content2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 0;
		border-bottom: 2rpx solid #bfbfbf;
	}

	.card1 .content1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.card1 {
		border-radius: 30rpx;
	}

	.orderDet {
		margin-top: 60rpx;
		height: 800rpx;
	}

	.address .img1 {
		width: 50rpx;
		height: 50rpx;
	}

	.address .addressInfo {
		width: 480rpx;
	}

	.address {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 650rpx;
		height: 88rpx;
		margin-left: 30rpx;
	}

	.top1 {
		font-size: 32rpx;
		color: #fff;
		margin: 30rpx 30rpx;
	}

	.topBar {
		background-color: #3284fc;
		width: 750rpx;
		height: 400rpx;
	}
</style>